<template>
  <div>
    <Row>
      <Col span="12">
        <Card>
          <Tree
            :data="menuData"
            :render="renderContent"
            @on-select-change="selectPreview"
            class="demo-tree-render"
          ></Tree>
        </Card>
      </Col>
      <Col span="10" offset="1" >
        <div style="position: relative; width: 100%;height: 600px;">
          <Drawer title="菜单详情" :width="100" :closable="false" :mask="false" :transfer="false" :inner="true" v-model="isPreview">
            <Form :label-width="80">
            <FormItem label="菜单名称" prop="title">
              {{priviewData.title}}
            </FormItem>
            <FormItem label="类型" prop="type">
                {{priviewData.type&&previewMenuType.find(t => t.id==priviewData.type).type}}
            </FormItem>
            <FormItem label="图标" prop="icon" v-if="priviewData.type!=3">
              <Icon :type="priviewData.icon" />
            </FormItem>
            <FormItem label="唯一标志" prop="route" >
                {{priviewData.route}}
            </FormItem>
            <FormItem label="页面路径" prop="component" v-if="priviewData.type===2" >
              {{priviewData.component}}
            </FormItem>
            <FormItem label="外链URL" prop="url" v-if="priviewData.type===4" >
              {{priviewData.url}}
            </FormItem>
            <FormItem label="序号" prop="sort">
              {{priviewData.sort}}
            </FormItem>
          </Form>
        </Drawer>
        </div>

      </Col>
    </Row>
    <Modal v-model="modelShow" :title="modelType===1?'新增':'编辑'">
        <Form
            ref="formValidate"
            :model="formValidate"
            :label-width="80"
          >
            <FormItem label="上级菜单" v-if="modelType===1">
              <Input v-model="formValidate.parentName" readonly />
            </FormItem>
            <FormItem label="名称" prop="title" :rules="{
                required: true,
                message: '名称必填',
                trigger: 'blur'
            }">
              <Input v-model="formValidate.title" placeholder="名称" />
            </FormItem>
            <FormItem label="类型" prop="type" v-if="modelType===1">
              <Select v-model="formValidate.type" placeholder="类型">
                  <Option v-for="t in menuType" :key="t.id" :value="t.id">{{t.type}}</Option>
              </Select>
            </FormItem>
            <FormItem label="图标" prop="icon" v-if="formValidate.type!=3">
              <Input v-model="formValidate.icon" placeholder="图标type值" />
            </FormItem>
            <FormItem label="唯一标志" prop="route" :rules="{
                required: true,
                message: '唯一标志必填',
                trigger: 'blur'
            }">
              <Input
                v-model="formValidate.route"
                placeholder="唯一性，作为path"
              />
            </FormItem>
            <FormItem label="页面路径" prop="component" v-if="formValidate.type===2" :rules="{
                required: true,
                message: '页面路径必填',
                trigger: 'blur'
            }">
              <Input
                v-model="formValidate.component"
                placeholder="view目录下页面存放位置(base/demo/demo)"
              />
            </FormItem>
            <FormItem label="外链URL" prop="url" v-if="formValidate.type===4" :rules="{
                required: true,
                message: '外链URL必填',
                trigger: 'blur'
            }">
              <Input v-model="formValidate.url" placeholder="外链URL" />
            </FormItem>
            <FormItem label="序号">
              <InputNumber :max="100" :min="1" v-model="formValidate.sort"></InputNumber>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button type="text" size="large" @click="modelShow=false">取消</Button>
            <Button type="primary" size="large" @click="submit">确定</Button>
        </div>
    </Modal>
    <Modal v-model="delShow" :footer-hide="!delallow"  title="删除">
        <Alert type="success" v-if="delallow"><Icon type="md-checkmark-circle" />{{delContent}}</Alert>
        <Alert type="error" v-else><Icon type="md-close-circle" />{{delContent}}</Alert>
        <div slot="footer">
            <Button type="primary" size="large" @click="delSubmit">确定</Button>
        </div>
    </Modal>
  </div>
</template>
<script>
import { getMenuTree, addMenu, updMenu, delMenu } from './menu'
export default {
  data () {
    return {
      value1: true,
      loading: true,
      isPreview: false,
      menuType: [],
      previewMenuType: [{ id: 1, type: '目录' }, { id: 2, type: '菜单' }, { id: 3, type: '按钮' }, { id: 4, type: '外链' }],
      modelShow: false,
      modelType: 1,
      menuData: [
        {
          id: 0,
          title: '菜单权限树',
          expand: true,
          render: (h, { root, node, data }) => {
            return h(
              'span',
              {
                style: {
                  display: 'inline-block',
                  width: '100%'
                }
              },
              [
                h('span', [
                  h('Icon', {
                    props: {
                      type: 'ios-folder-outline'
                    },
                    style: {
                      marginRight: '8px'
                    }
                  }),
                  h('span', data.title)
                ]),
                h(
                  'span',
                  {
                    style: {
                      display: 'inline-block',
                      float: 'right',
                      marginRight: '32px'
                    }
                  },
                  [
                    h('Button', {
                      props: Object.assign({}, this.buttonProps, {
                        icon: 'md-add',
                        type: 'primary'
                      }),
                      style: {
                        width: '88px'
                      },
                      on: {
                        click: () => {
                          this.add(data)
                        }
                      }
                    })
                  ]
                )
              ]
            )
          },
          children: []
        }
      ],
      buttonProps: {
        type: 'default',
        size: 'small'
      },
      priviewData: {},
      formValidate: {},
      nowData: {},
      nowRoot: {},
      nowNode: {},
      delShow: false,
      delallow: true,
      delContent: ''
    }
  },
  created () {
    this.getMenuTree()
  },
  methods: {
    initMenu () {
      return {
        title: '',
        type: 1,
        identity: '',
        url: '',
        route: '',
        parentId: '',
        sort: 1,
        status: '',
        component: '',
        icon: ''
      }
    },
    renderContent (h, { root, node, data }) {
      let edit = h('Button', {
        props: Object.assign({}, this.buttonProps, {
          icon: 'ios-build'
        }),
        style: {
          marginRight: '8px'
        },
        on: {
          click: () => {
            this.edit(data)
          }
        }
      })
      let add = h('Button', {
        props: Object.assign({}, this.buttonProps, {
          icon: 'md-add'
        }),
        style: {
          marginRight: '8px'
        },
        on: {
          click: () => {
            this.add(data)
          }
        }
      })
      let remove = h('Button', {
        props: Object.assign({}, this.buttonProps, {
          icon: 'md-remove'
        }),
        on: {
          click: () => {
            this.remove(root, node, data)
          }
        }
      })
      let ext = []
      switch (data.type) {
        case 3:
          ext = [edit, remove]
          break
        case 4:
          ext = [edit, remove]
          break
        default:
          ext = [edit, add, remove]
      }
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        },
        [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline'
              },
              style: {
                marginRight: '8px'
              }
            }),
            h('span', data.title)
          ]),
          h(
            'span',
            {
              style: {
                display: 'inline-block',
                float: 'right',
                marginRight: '32px'
              }
            },
            ext
          )
        ]
      )
    },
    selectPreview (list) {
      this.priviewData = {}
      let node = list[0]
      if (node && node.id > 0 && !this.modelShow && !this.delShow) {
        this.priviewData = node
        this.isPreview = true
      } else {
        this.isPreview = false
      }
    },
    append (child) {
      const children = this.nowData.children || []
      child.expand = true
      children.push(child)
      this.$set(this.nowData, 'children', children)
    },
    add (data) {
      this.nowData = data
      this.formValidate = Object.assign(this.initMenu(), { parentId: data.id, parentName: data.title })
      if (data.type === 2) {
        this.formValidate.type = 3
        this.menuType = [{ id: 3, type: '按钮' }]
      } else {
        this.menuType = [{ id: 1, type: '目录' }, { id: 2, type: '菜单' }, { id: 4, type: '外链' }]
      }
      this.priviewData = false
      this.modelShow = true
      this.modelType = 1
    },
    edit (data) {
      this.nowData = data
      this.formValidate = Object.assign({}, data)
      this.priviewData = false
      this.modelShow = true
      this.modelType = 2
    },
    remove (root, node, data) {
      this.delShow = true
      if (data.children && data.children.length > 0) {
        this.delContent = '存在子类，先删除子类'
        this.delallow = false
        return
      }
      this.delallow = true
      this.delContent = '是否确定删除？'
      this.nowData = data
      this.nowRoot = root
      this.nowNode = node
    },
    submit () {
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          if (this.modelType === 1) {
            addMenu(this.formValidate).then(res => {
              this.append(res.data)
              this.modelShow = false
              this.$Message.success('操作成功')
            })
          } else {
            updMenu(this.formValidate).then(res => {
              this.modelShow = false
              this.$Message.success('操作成功')
            })
          }
        }
      })
    },
    delSubmit () {
      delMenu(this.nowData.id).then(res => {
        const parentKey = this.nowRoot.find((el) => el === this.nowNode).parent
        const parent = this.nowRoot.find((el) => el.nodeKey === parentKey).node
        const index = parent.children.indexOf(this.nowData)
        parent.children.splice(index, 1)
        this.delShow = false
        this.$Message.success('删除成功')
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    getMenuTree () {
      getMenuTree().then((res) => {
        this.menuData[0].children = res.data
      })
    }
  }
}
</script>
<style>
.demo-tree-render .ivu-tree-title {
  width: 100%;
}
</style>
